<meta charset="UTF-8" />


<!-- <button class="btn btn-lg" ng-click="dependenteTela()">Dependentes</button>-->
<style>
    table {
        width: 100%;
        border-collapse: collapse;


    }

    .margem-topo {

        margin-top: 6%;
    }

    /* Zebra striping */
    tr:nth-of-type(odd) {
        background: #eee;
    }
    th {
        background: #207B96;
        color: white;
        font-weight: bold;
    }
    td, th {
        padding: 6px;
        border: 1px solid #ccc;
        text-align: left;
    }
    /*
        Max width before this PARTICULAR table gets nasty
        This query will take effect for any screen smaller than 760px
        and also iPads specifically.
        */
    @media only screen and (max-width: 760px) , ( min-device-width : 768px)
    and (max-device-width: 1024px) {
        /* Force table to not be like tables anymore */
        table,thead,tbody,th,td,tr {
            display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        tr {
            border: 1px solid #ccc;
            text-align: center;
        }
        td {
            /* Behave  like a "row" */

            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }
        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        /*
            Label the data
            */
        td:nth-of-type(1):before {
            content: "#";
        }
        td:nth-of-type(2):before {
            content: "Nome do dependente";
        }
        td:nth-of-type(3):before {
            content: "Data de nascimento";
        }
        td:nth-of-type(4):before {
            content: "Idade";
        }
        td:nth-of-type(5):before {
            content: "Parentesco";
        }
        td:nth-of-type(6):before {
            content: "Sócio";
        }
        td:nth-of-type(7):before {
            content: "Número da Matrícula";
        }
        td:nth-of-type(8):before {
            content: "";
        }
        td:nth-of-type(9):before {
            content: "";
        }


    }

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width
    : 480px) {
        body {
            padding: 0;
            margin: 0;
            width: 320px;
        }
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width:
    1024px) {
        body {
            width: 495px;
        }
    }

</style>
        <h3>Cadastro de Dependentes</h3><br/>

<form ng-submit="salvar()">
    <div class="form-group ">
    <label for="txtNome">Nome</label>
    <input type="text" placeholder="Nome" class="form-control input-lg" id="txtNome" ng-model="dependente.nome" required  />
    </div>
    <div class="form-group ">
    <label for="txtDataNascimento">Data de nascimento</label>
    <input type="date" placeholder="Data de nascimento" ng-model="dependente.dataNascimento" class="form-control input-lg" id="txtDataNascimento" required />
    </div>
    <div class="form-group ">
    <label for="">Parentesco</label>
    <select  class="form-control input-lg" ng-model="dependente.parentesco" required>

        <option  value="Mãe">Mãe</option>
        <option value="Pai">Pai</option>
        <option value="Filho(a)">Filho(a)</option>
        <option value="Irmã(ão)">Irmã(ão)</option>
        <option value="Conjuge">Conjuge</option>
        <option value="" selected>Selecione...</option>
    </select>
    </div>
    <div class="form-group ">
    <label for="">Sócio</label><br/>

    <select  ng-model="dependente.codSocio" class="form-control input-lg" required>

        <option  ng-repeat="item in matriculaENome | orderBy: 'nome'" value="{{item.id}}">{{ item.nome }} {{item.sobrenome}} &nbsp; Matrícula: &nbsp;{{ item.numero_matricula }}. </option>
        <option value="" selected>Selecione...</option>

    </select>
        </div>
    <button class="btn btn-primary btn-lg btn-block">Salvar</button>


</form>


<br/><br/><br/>
<section ng-hide="mostrar" >

    <div id="page-wrap" class="margem-topo" >
        <input type="text" class="form-control input-lg" ng-model="search" placeholder="Faça sua busca"/><br/>
        <table>
            <thead>
            <tr>

                <th>#</th>
                <th>Nome do dependente</th>
                <th>Data de nascimento</th>
                <th>Idade</th>
                <th>Parentesco</th>
                <th>Sócio</th>
                <th>Número da Matricúla</th>
                <th></th>
                <th></th>


            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="dependente in dependentes | filter: search | orderBy: 'nome'">
                <td >{{$index + 1}}</td>
                <td>{{ dependente.nome }}</td>
                <td>{{ dependente.dataNascimento }}</td>
                <td>{{ dependente.idade }}</td>
                <td>{{ dependente.parentesco }}</td>
                <td>{{ dependente.nomeSocio }}</td>
                <td>{{ dependente.numeroMatricula }}</td>
                <td><span  ng-click="editar(dependente.id)"><img src="images/icons/pencil43.png" alt=""/></span></td>
                <td><span  ng-click="excluir(dependente.id, dependente.nome);" ><img src="images/icons/delete96.png" alt=""/></span></td>



            </tr>


            </tbody>
        </table>

</div>
    </section>
